<!DOCTYPE html>
<html>
	<head>
		<title>借阅信息</title>
		<meta charset="utf-8">
		<link rel="shortcut icon" href="./images/favicon.png" type="image/x-icon">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<!-- 引入css -->
		<link rel="stylesheet" href="./css/plugins/font-awesome-4.7.0/css/font-awesome.min.css"  media="all">
		<link rel="stylesheet" href="./lib/layui-v2.3.0/css/layui.css"  media="all">
		<link rel="stylesheet" href="./css/main.css"  media="all">
		<link rel="stylesheet" href="./lib/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
		
	</head>
	<body class="timo-layout-page">
		<div class="layui-card">
			<div class="layui-card-header timo-card-header">
				<span><i class="fa fa-bars"></i> 借阅信息</span>
				<i class="layui-icon layui-icon-refresh refresh-btn"></i>
			</div>
			<div class="layui-card-body">
				<div class="layui-row timo-card-screen put-row">
					<div class="pull-left layui-form-pane timo-search-box">
						<div class="layui-inline">
							<label class="layui-form-label">状态</label>
							<div class="layui-input-block timo-search-status"">
								<select class="timo-search-select" name="status" style="width: 80px;">
									<option value="1">已借出</option>
									<option value="2">未借出</option>
								</select>
							</div>
						</div>
						<div class="layui-inline" style="margin-left: 10px;">
							<label class="layui-form-label">所在部门</label>
							<div class="layui-input-block">
								<input class="layui-input select-tree" value="" type="text" placeholder="请选择部门" data-url="#" readonly="readonly">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">用户名</label>
							<div class="layui-input-block">
								<input type="text" name="username" value="" placeholder="请输入用户名" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">用户昵称</label>
							<div class="layui-input-block">
								<input type="text" name="nickname" value="" placeholder="请输入用户昵称" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-inline">
							<button class="layui-btn timo-search-btn">
								<i class="fa fa-search"></i>
							</button>
						</div>
					</div>
					<div class="pull-right">
						<button class="layui-btn open-popup" data-title="添加图书" data-size="460,357" data-url="addBook.html">
							<i class="fa fa-plus"></i> 添加</button>
						<button class="layui-btn open-popup" data-title="删除图书" data-size="600,520" data-url="deleteBook.html" style="margin-left: 0px;">
							<i class="layui-icon layui-icon-close" style="font-size: 14px; font-weight: bold; color: #fff;"></i>  删除</button>
						<div class="btn-group">
							<button class="layui-btn">操作<span class="caret"></span></button>
							<dl class="layui-nav-child layui-anim layui-anim-upbit">
								<dd><a class="ajax-status" href="/role/status/ok">启用</a></dd>
								<dd><a class="ajax-status" href="/role/status/freezed">冻结</a></dd>
							</dl>
						</div>
					</div>
				</div>
				<table class="layui-table timo-table">
					<thead>
					<tr>
						<th class="timo-table-checkbox">
							<label class="timo-checkbox"><input type="checkbox">
								<i class="layui-icon layui-icon-ok"></i></label>
						</th>
						<th>图书序号</th>
						<th>图书名称</th>
						<th>图书作者</th>
						<th>图书状态</th>
						<th>图书出版社</th>
						<th>图书出版年</th>
						<th>图书索书号</th>
						<th>操作</th>
					</tr>
					</thead>
					<tbody>
					<tr>
						<td><label class="timo-checkbox"><input type="checkbox" value="1">
							<i class="layui-icon layui-icon-ok"></i></label></td>
						<td>0001</td>
						<td>活着</td>
						<td>余华</td>
						<td>已借出</td>
						<td>高等教育出版社</td>
						<td>2019</td>
						<td>TP393.409/491</td>
						<td>
							<a class="open-popup" data-title="读者信息" data-size="600,570" href="#" data-url="ReaderResult.html">查询</a>
							<a class="open-popup" data-title="详细信息" data-size="800,600" href="#" data-url="404.html">详细</a>
						</td>
					</tr>
					<tr>
						<td><label class="timo-checkbox"><input type="checkbox" value="2">
							<i class="layui-icon layui-icon-ok"></i></label></td>
						<td>0002</td>
						<td>灵与肉</td>
						<td>张贤亮</td>
						<td>已借出</td>
						<td>人民文学出版社</td>
						<td>2019</td>
						<td>TP393.409/495</td>
						<td>
							<a class="open-popup" data-title="读者信息" data-size="600,570" href="#" data-url="ReaderResult.html">查询</a>
							<a class="open-popup" data-title="详细信息" data-size="800,600" href="#" data-url="404.html">详细</a>
						</td>
					</tr>
					<tr>
						<td><label class="timo-checkbox"><input type="checkbox" value="3">
							<i class="layui-icon layui-icon-ok"></i></label></td>
						<td>0003</td>
						<td>平凡的世界</td>
						<td>路遥</td>
						<td>已借出</td>
						<td>二十一世纪出版社</td>
						<td>2020</td>
						<td>TP393.409/388</td>
						<td>
							<a class="open-popup" data-title="读者信息" data-size="600,570" href="#" data-url="ReaderResult.html">查询</a>
							<a class="open-popup" data-title="详细信息" data-size="800,600" href="#" data-url="404.html">详细</a>
						</td>
					</tr>
					<tr>
						<td><label class="timo-checkbox"><input type="checkbox" value="2">
							<i class="layui-icon layui-icon-ok"></i></label></td>
						<td>0004</td>
						<td>雾都孤儿</td>
						<td>查尔斯</td>
						<td>已借出</td>
						<td>上海科学普及出版社</td>
						<td>2020</td>
						<td>TP393.409/505</td>
						<td>
							<a class="open-popup" data-title="读者信息" data-size="600,570" href="#" data-url="ReaderResult.html">查询</a>
							<a class="open-popup" data-title="详细信息" data-size="800,600" href="#" data-url="404.html">详细</a>
						</td>
					</tr>
					<tr>
						<td><label class="timo-checkbox"><input type="checkbox" value="3">
							<i class="layui-icon layui-icon-ok"></i></label></td>
						<td>0005</td>
						<td>时间简史</td>
						<td>斯蒂芬·威廉·霍金</td>
						<td>已借出</td>
						<td>中信出版社</td>
						<td>2020</td>
						<td>TP393.409/498</td>
						<td>
							<a class="open-popup" data-title="读者信息" data-size="600,570" href="#" data-url="ReaderResult.html">查询</a>
							<a class="open-popup" data-title="详细信息" data-size="800,600" href="#" data-url="404.html">详细</a>
						</td>
					</tr>		
					<tr id="footer">
						<td colspan="9" align="center">
							<div class="layui-box layui-laypage layui-laypage-molv" id="layui-laypage-4">
								<a href="javascript:;" class="layui-laypage-prev layui-disabled" data-page="0">上一页</a>
								<span class="layui-laypage-curr">
									<em class="layui-laypage-em" style="background-color:#009688;"></em>
									<em>1</em>
								</span>
								<a href="javascript:;" data-page="2">2</a>
								<a href="javascript:;" data-page="3">3</a>
								<a href="javascript:;" data-page="4">4</a>
								<span class="layui-laypage-spr">...</span>
								<a href="javascript:;" class="layui-laypage-last" title="尾页" data-page="10">10</a>
								<a href="javascript:;" class="layui-laypage-next" data-page="2">下一页</a>
								
								
							</div>
						</td>
					</tr>			
					</tbody>
				</table>
			</div>
		</div>
		<script type="text/javascript" src="./lib/layui-v2.3.0/layui.js" charset="utf-8"></script>
		<script type="text/javascript" src="./js/main.js" charset="utf-8"></script>
		<script type="text/javascript" src="./js/plugins/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="./lib/zTree_v3/js/jquery.ztree.core.min.js"></script>
		<script type="text/javascript">
			var local = window.localStorage;
			// 树形菜单
			$.fn.selectTree({
				rootTree: '全部',
				onSelected: function(treeNode){
					local.setItem('deptTitle', treeNode.name);
				}
			});
			$(function(){
				var dept = $('.select-tree');
				if(dept.attr('value').length > 0){
					dept.val(local.getItem('deptTitle'));
				}
			});
		</script>
	</body>
</html>